<template>
  <div>
    <p>name: {{data?.name}}</p>
    <p>age: {{data?.age}}</p>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  setup () {
    // !ref 也可以包装复杂数据类型为响应式数据，例如我要接受后端返回的数据（可能是简单的也可能是复杂，建议 ref）
    // let data = {} // 错误写法 1
    // let data = reactive({}) // 错误写法 2

    // data 已经是一个响应式的 ref 对象了，默认值可以通过 data.value 获取
    const data = ref(null)

    setTimeout(() => {
      // res 后端返回的数据
      const res = {
        age: 18,
        name: 'xxx'
      }
      // !一定不要忘了加 .value
      data.value = res
    },2000)
    
    return {data}
  }
}
</script>
